<template>
  <div>
    <el-container class="container" id="main">
      <el-header class="header drag" height="50px">
        <Header  />
      </el-header>
      <el-container>
        <el-aside class="aside" width="210px">
          <Aside />
        </el-aside>
        <el-main class="main">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </el-main>
      </el-container>
      <el-footer class="footer" height="70px">
        <Footer />
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import Header from '@/components/Header'
import Aside from '@/components/Aside'
import Footer from '@/components/Footer'
export default {
  components: {
    Header,
    Aside,
    Footer
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100vh;
}
.header {
  background-color: var(--wyred);
}
.aside {
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #efefef, #efefef);
}
.main {
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex: 1;
  flex-shrink: 0;
}
.footer {
  background: #f7f7f7;
  padding: 0;
}
</style>